<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="../../include/laypublic.jsp" %>
<%@ include file="../../include/vueComponent.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <title>发票管理详情</title>
</head>
<link rel="stylesheet" href="${ctx}/resources/vue-element-lib/detail.css">
<body>
<div id="app">
    <div class="layui-tab layui-tab-brief" lay-filter="xqxx-tab-all">
        <ul class="layui-tab-title">
            <li id="tbglId" class="layui-this" lay-id="0">发票管理详情</li>
        </ul>
        <div class="layui-tab-content" style="height: 100px;">
            <div class="layui-tab-item layui-show">
                <div class="container">
                    <el-form ref="formRef" label-width="180px" label-suffix="："
                             label-position="left">
                        <div class="title">
                            <h3>付款单信息</h3>
                        </div>
                        <el-row>
                            <x-col>
                                <el-form-item label="项目名称">
                                    <span v-if="id">{{info.proName}}</span>
                                    <el-select v-model="info.proCode" filterable placeholder="请选择融资业务名称" v-else
                                               style="width: 100%">
                                        <el-option v-for="item in proInfoList" :key="item.proCode" :label="item.proName"
                                                   :value="item.proCode">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </x-col>
                            <x-col position="right">
                                <el-form-item label="拨付方式">
                                    <x-select name="拨付方式" v-model="info.applyMode" :options="handModeList"></x-select>
                                </el-form-item>
                            </x-col>
                        </el-row>
                        <el-row>
                            <x-col>
                                <el-form-item label="拨付日期">
                                    <el-date-picker style="width: 100%;" type="date" value-format="yyyy-MM-dd"
                                                    placeholder="选择拨付日期" v-model="info.applyDate"></el-date-picker>
                                </el-form-item>
                            </x-col>
                            <x-col position="right">
                                <el-form-item label="拨付类型">
                                    <x-select name="拨付类型" v-model="info.applyType" :options="applyTypeList"></x-select>
                                </el-form-item>
                            </x-col>
                        </el-row>
                        <el-row>
                            <x-col>
                                <el-form-item label="拨付金额">
                                    <x-input name="拨付金额" v-model="info.applyAmount" type="number" min="0"></x-input>
                                </el-form-item>
                            </x-col>
                            <x-col position="right">
                                <el-form-item label="申请人">
                                    <span>{{info.staffName}}</span>
                                </el-form-item>
                            </x-col>
                        </el-row>
                        <el-row>
                            <x-col>
                                <el-form-item label="拨付公司">
                                    <el-select v-model="info.applyOrgId" filterable placeholder="请选择拨付公司"
                                               style="width: 100%">
                                        <el-option v-for="item in orgInfoList" :key="item.id" :label="item.compName"
                                                   :value="item.id">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </x-col>
                            <x-col position="right">
                                <el-form-item label="开票性质">
                                    <x-select name="开票性质" v-model="info.invoiceProperty"
                                              :options="invoicePropertyList"></x-select>
                                </el-form-item>
                            </x-col>
                        </el-row>
                        <div class="title">
                            <h3>发票基本信息</h3>
                        </div>
                        <el-row>
                            <x-col>
                                <el-form-item label="发票号">
                                    <x-input name="发票号" v-model="info.invoiceNo"></x-input>
                                </el-form-item>
                            </x-col>
                            <x-col position="right">
                                <el-form-item label="货物或应税劳务、服务名称">
                                    <x-input name="货物或应税劳务、服务名称" v-model="info.goodName"></x-input>
                                </el-form-item>
                            </x-col>
                        </el-row>
                        <el-row>
                            <x-col>
                                <el-form-item label="开票金额">
                                    <x-input name="开票金额" v-model="info.invoiceAmount" @input="sum" type="number"
                                             min="0"></x-input>
                                </el-form-item>
                            </x-col>
                            <x-col position="right">
                                <el-form-item label="税额">
                                    <x-input name="税额" v-model="info.taxAmount" @input="sum" type="number"
                                             min="0"></x-input>
                                </el-form-item>
                            </x-col>
                        </el-row>
                        <el-row>
                            <x-col>
                                <el-form-item label="价税合计">
                                    <span>{{info.totalAmount}}</span>
                                </el-form-item>
                            </x-col>
                            <x-col position="right">
                                <el-form-item label="开票日期">
                                    <el-date-picker style="width: 100%;" type="date" value-format="yyyy-MM-dd"
                                                    placeholder="选择开票日期" v-model="info.invoiceDate"></el-date-picker>

                                </el-form-item>
                            </x-col>
                        </el-row>
                        <div class="title">
                            <h3>购买方信息</h3>
                        </div>
                        <el-row>
                            <x-col>
                                <el-form-item label="名称">
                                    <x-input name="名称" v-model="info.buyerName"></x-input>
                                </el-form-item>
                            </x-col>
                            <x-col position="right">
                                <el-form-item label="纳税人识别号">
                                    <x-input name="纳税人识别号" v-model="info.buyerTaxNumber"></x-input>
                                </el-form-item>
                            </x-col>
                        </el-row>
                        <el-row>
                            <x-col>
                                <el-form-item label="地址">
                                    <x-input name="地址" v-model="info.buyerAddress"></x-input>
                                </el-form-item>
                            </x-col>
                            <x-col position="right">
                                <el-form-item label="电话">
                                    <x-input name="电话" v-model="info.buyerTel"></x-input>
                                </el-form-item>
                            </x-col>
                        </el-row>
                        <el-row>
                            <x-col>
                                <el-form-item label="开户行">
                                    <x-input name="开户行" v-model="info.buyerOpenBank"></x-input>
                                </el-form-item>
                            </x-col>
                            <x-col position="right">
                                <el-form-item label="账号">
                                    <x-input name="账号" v-model="info.buyerAccount"></x-input>
                                </el-form-item>
                            </x-col>
                        </el-row>
                        <div class="title">
                            <h3>销售方信息</h3>
                        </div>
                        <el-row>
                            <x-col>
                                <el-form-item label="名称">
                                    <x-input name="名称" v-model="info.sellerName"></x-input>
                                </el-form-item>
                            </x-col>
                            <x-col position="right">
                                <el-form-item label="纳税人识别号">
                                    <x-input name="纳税人识别号" v-model="info.sellerTaxNumber"></x-input>
                                </el-form-item>
                            </x-col>
                        </el-row>
                        <el-row>
                            <x-col>
                                <el-form-item label="地址">
                                    <x-input name="地址" v-model="info.sellerAddress"></x-input>
                                </el-form-item>
                            </x-col>
                            <x-col position="right">
                                <el-form-item label="电话">
                                    <x-input name="电话" v-model="info.sellerTel" type="number" min="0"></x-input>
                                </el-form-item>
                            </x-col>
                        </el-row>
                        <div class="title">
                            <h3>审批信息</h3>
                        </div>
                        <%@ include file="../process/process-audit.jsp" %>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="${ctx}/resources/vue-element-lib/jquery.js"></script>
<script>
    let fileArr = [];
    var staticPath = '${fileHttpPre}';
    layui.config({
        base: '${ctx}/resources/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'set', 'upload', 'table', 'transfer', 'laydate', 'element', 'layer'], function () {
        var $ = layui.$
            , upload = layui.upload
            , table = layui.table
            , element = layui.element
            , layer = layui.layer;

        ;(function () {
            //定义构造函数
            var Upfile = function (ele, type, opt) {
                this.defaults = {
                    //elem:‘#uploadPic‘	//绑定元素
                    elem: $(ele)	//绑定元素
                    , url: basePath + '/contractInfo/uploadAtt/',
                    data: {
                        types: type
                    },
                    multiple: true,
                    accept: 'file',
                    acceptMime: 'application/zip,application/x-rar-compressed,image/jpeg,image/png,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.ms-powerpoint,application/vnd.openxmlformats-officedocument.presentationml.presentation,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/pdf',

                    method: 'post',
                    before: function (obj) { //obj参数包含的信息
                        layer.load(); //上传loading
                    },
                    done: function (res) {
                        //如果上传失败
                        if (res.code > 0) {
                            layer.closeAll('loading'); //关闭loading
                            return layer.msg(res.msg, {icon: 7});
                        }
                        //上传完毕
                        if (res.entity != null && res.entity.length > 0) {
                            fileArr.push(res.entity[0])
                            for (var i in res.entity) {
                                var contractInfo = res.entity[i];
                                var arr = contractInfo.split("|");
                                var imgSrc = "";
                                var suffix = arr[1].substring(arr[1].lastIndexOf(".") + 1, arr[1].length);
                                if (suffix == 'jpg' || suffix == 'png') {
                                    imgSrc = "${fileHttpPre}/" + arr[3];
                                } else {
                                    imgSrc = "${ctx}/resources/images/" + suffix + ".jpg";
                                }
                                $('#' + type + '-upload-more-list')
                                    .append('<div class="layui-upload-img-div" id="upload_img_' + arr[2] + '"><img src="' + imgSrc + '" title="'
                                        + arr[1] + '" class="layui-upload-img"><div class="mask"><a href="javascript:void(0)" onclick="showImg(\'' + "${fileHttpPre}"
                                        + arr[3] + '\');">查看</a><a href="javascript:void(0)" onclick="del(\''
                                        + arr[2] + '\')";>删除</a></div><p>' + arr[1] + '</p><input type="hidden" value="'
                                        + contractInfo + '" id="fileAtt_' + arr[2] + '" name="fileAtts" ></input></div> ');
                            }
                        }
                    },
                    allDone: function (obj) { //当文件全部被提交后，才触发
                        layer.closeAll('loading'); //关闭loading
                    },
                    error: function () {
                        layer.closeAll('loading'); //关闭loading
                        //上传失败
                        layer.msg("上传失败，请稍后再试~", {icon: 7});
                    }
                }
                this.options = $.extend({}, this.defaults, opt);
            };

            //定义方法
            Upfile.prototype = {
                init: function () {
                    var _this = this;
                    return layui.use('upload', function () {
                        var upload = layui.upload;

                        //执行实例
                        var uploadInst = upload.render(_this.options);
                    });
                }
            };

            //在插件中使用对象
            $.fn.upfile = function (options) {
                var upfile = new Upfile(this, options);
                return upfile.init();
            }
        })();
        //上传文件
        $('#14-upload-more').upfile(14);
    });

    //删除文件
    function del(index) {
        layui.$("#fileAtt_" + index).remove();
        layui.$("#upload_img_" + index).remove();
    }

    //根据url查看文件
    function showImg(url) {
        var openWin = window.open(url, '', 'left=410,height=768, width=1024, top=200,  toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no');
    }

    /*核心*/
    var vm = new Vue({
        el: '#app',
        data() {
            return {
                layId: '0',
                id: '',
                info: {},
                procNodeList: [],
                tempNodeList: [],
                proInfoList: [],//项目名称列表
                orgInfoList: [],//申请公司列表
                auditMsg: '',//审批意见
                invoicePropertyList: [],//开票性质
                handModeList: [],//拨付方式
                applyTypeList: [],//拨付类型
            }
        },
        created() {
            let that = this;
            that.id = "${id}";
            that.proCode = "${proCode}";
            that.processId = "${processId}";
            this.queryDetail();
            that.queryProcessList();
        },
        mounted() {

        },
        methods: {
            sum() {
                this.info.totalAmount = Number(this.info.taxAmount) + Number(this.info.invoiceAmount);
                this.info.totalAmount = this.info.totalAmount.toFixed(2)
            },
            error(text) {
                this.$message({
                    message: text,
                    type: 'warning'
                });
            },
            queryDetail() {
                let that = this;
                zAjax('/fiaHistoryProcess/proNodeDetail', {processId: that.processId}).then(res => {
                    if (res.code == 0) {
                        that.invoicePropertyList = res.entity.detailJson.invoicePropertyList;//开票性质
                        that.applyTypeList = res.entity.detailJson.applyTypeList;//拨付类型
                        that.handModeList = res.entity.detailJson.handModeList;//拨付方式
                        that.proInfoList = res.entity.detailJson.proInfoList;//金融机构
                        that.bankInfoList = res.entity.detailJson.bankInfoList;//到账银行
                        that.info = res.entity.detailJson.info;
                        that.orgInfoList = res.entity.detailJson.orgInfoList;//组织架构单位列表
                        that.handTypeList = res.entity.detailJson.handTypeList;//上交类型
                    }
                })
            },
            queryProcessList() {
                let that = this;
                zAjax('/fiaHistoryProcess/processList', {processId: that.processId}).then(res => {
                    console.log(res)
                    if (res.success) {
                        that.procNodeList = res.entity.procNodeList;
                        that.tempNodeList = res.entity.tempNodeList;
                    }
                })
            }
        }
    })
</script>
</body>
</html>